<script setup>

const recommendationItems = ref([]);

async function fetchRecommendedItems() {
  try {
    const response = await axios.get('/api/cms/articles/get_recommended/');
    if (response.data && Array.isArray(response.data)) {
      recommendationItems.value = response.data
    } else {
      console.error('获取推荐数据格式不正确:', response.data.toString());
    }
  } catch (error) {
    console.error('获取排名数据失败:', error);
  }
}

onMounted(() => {
  fetchRecommendedItems();
});
</script>

<template>
  <div class="recommendation-box" v-if="recommendationItems.length>0">
    <h3><i class="fa fa-thumbs-up"></i>站长推荐</h3>
    <div class="underline"></div>
    <!-- 主推荐区域 -->
    <div class="main-recommendation">
      <img src="../../../assets/images/recommendtion.jpg" alt="文章图片">
      <span class="title"> 生活坏到一定程度就会好起来，<br>因为它无法更坏。</span>
    </div>
    <!-- 推荐列表 -->
    <ul class="recommend-list">
      <li v-for="(item, index) in recommendationItems" :key="item.id">
        <img
          :src="item.image || (item.images[0]?.image) || 'https://picsum.photos/65/65?random=1'"
          alt="文章图片"
        >
        <router-link
          :to="{ name: 'article-detail', params: { id: item.id } }"
          class="recommend-title"
        >
          {{ item.title }}
        </router-link>
      </li>
    </ul>
  </div>
</template>



<style scoped>
/* 组件样式 */
.recommendation-box {
  background-color: var(--card-bg-color, #fff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 10px;
  font-family: Arial, sans-serif;
}

h3 {
  font-size: 1.2em;
  padding-bottom: 5px;
  color: #333;
}

h3 i {
  margin-right: 5px;
}

/* 标题样式 */
.title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: #FFF;
  text-align: center;
  font-size: 14px;
  padding: 0 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-height: 15px;
}


/* 主推荐区域样式 */
.main-recommendation {
  margin: 15px auto;
  text-align: center;
  max-width: 282px;
  max-height: 146px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.main-recommendation img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 5px #999;
  transition: all 0.3s ease-in-out;
}

.main-recommendation img:hover {
  transform: scale(1.1);
}

/* 推荐列表样式 */
.recommend-list {
  list-style: none;
  padding: 10px;

  margin: 10px 0 0 0;
}

.recommend-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}

.recommend-list li:hover {
  background-color: #f5f5f5;
}

.recommend-list li img {
  width: 65px;
  height: 65px;
  margin-right: 10px;
}

.recommend-list li a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制行数为两行 */
  overflow: hidden;
  text-overflow: ellipsis;
}


.recommend-list li a:hover {
  color: #008cba;
}

</style>